<template>
  <Modal
    v-model:visible="visible"
    :title="getTitle"
    @ok="handleSubmit"
    @cancel="closeModal"
    @close="resetFields()"
    :destroyOnClose="true"
    :maskClosable="true"
    :closable="true"
    okText="确认"
    cancelText="取消"
  >
    <Form class="p-4 xl:text-left" ref="formRef" :model="formState">
      <FormItem
        label="组件名称"
        name="componentId"
        :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
        :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
      >
        <Select v-model:value="formState.componentId" placeholder="请选择组件" :disabled="isEdit">
          <SelectOption
            v-for="option in selectComponentOptions"
            v-bind:key="option.id"
            :value="option.id"
            :disabled="option.disabled"
            >{{ option.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem
        label="上游组件"
        name="upstreamComponentId"
        :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
        :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
      >
        <Select
          v-model:value="formState.upstreamComponentId"
          placeholder="请选择上游组件"
          mode="multiple"
          :disabled="!isChosen"
        >
          <SelectOption v-for="option in streamSelectComponentOptions" v-bind:key="option.id" :value="option.id"
            >{{ option.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem
        label="下游组件"
        name="downstreamComponentId"
        :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
        :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
      >
        <Select
          v-model:value="formState.downstreamComponentId"
          placeholder="请选择下游组件"
          mode="multiple"
          :disabled="!isChosen"
        >
          <SelectOption v-for="option in streamSelectComponentOptions" v-bind:key="option.id" :value="option.id"
            >{{ option.name }}
          </SelectOption>
        </Select>
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
/* eslint-disable */
import { Modal, Button, Select, SelectOption, Form, FormItem } from 'ant-design-vue';
import { ref, watch } from 'vue';
import {
  addOrUpdateComponentRelationship,
  getComponentList,
  getComponentListWithoutCurrentComponent,
} from '/@/api/system-mgmt/app-mgmt/component';
import { RelationshipModel } from '/@/api/system-mgmt/app-mgmt/model/componentModel';

const visible = ref(false);
const getTitle = ref();
const selectComponentOptions = ref();
const streamSelectComponentOptions = ref();
const isEdit = ref(false);
const isChosen = ref(false);
const emits = defineEmits(['success']);
const appId = ref();
const formState = ref({ componentId: undefined, downstreamComponentId: undefined, upstreamComponentId: undefined });
const openModal = async (id: string, record?: any, others: any) => {
  visible.value = true;
  isChosen.value = false;
  formState.value = { componentId: undefined, downstreamComponentId: undefined, upstreamComponentId: undefined };
  appId.value = id;
  if (record === undefined) {
    isEdit.value = false;
    getTitle.value = '新增组件关系';
    let disComponentIds = [];
    let res = await getComponentList({ appId: id });
    if (others != undefined) {
      others.forEach((item) => {
        disComponentIds.push(item.componentId);
      });
    }
    console.log(disComponentIds);
    res.forEach((item) => {
      item.disabled = false;
      disComponentIds.forEach((temp) => {
        if (temp === item.id) {
          item.disabled = true;
        }
      });
    });

    selectComponentOptions.value = res;
    console.log(selectComponentOptions.value);
  } else {
    isEdit.value = true;
    isChosen.value = true;
    let res = await getComponentList({ appId: id });
    selectComponentOptions.value = res;
    console.log(record);
    formState.value.componentId = record.componentId;
    formState.value.downstreamComponentId = record.downstreamComponentId;
    formState.value.upstreamComponentId = record.upstreamComponentId;
    let selectOption = await getComponentListWithoutCurrentComponent({
      appId: id,
      current: record.componentId,
    });
    streamSelectComponentOptions.value = selectOption;
  }
};

watch(
  () => formState.value.componentId,
  async () => {
    if (formState.value.componentId !== undefined) {
      console.log(formState.value.componentId);
      streamSelectComponentOptions.value = await getComponentListWithoutCurrentComponent({
        appId: appId.value,
        current: formState.value.componentId,
      });
      isChosen.value = true;
    }
  }
);

const closeModal = () => {
  visible.value = false;
};

const handleSubmit = async () => {
  let params: RelationshipModel = formState.value;
  params.appId = appId.value;
  await addOrUpdateComponentRelationship(params);
  emits('success');
  closeModal();
};

defineExpose({ openModal });
</script>
